﻿   
<template>
    <section>


 
 
                <!--工具条-->
                <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
                    <el-form :inline='true' :model='filters' @submit.native.prevent>
                        <el-form-item>
                            <el-input v-model='filters.name' placeholder='名称/Key'></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type='primary' @click='getDtoPage'>查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type='primary' @click='handleAdd'>新增</el-button>
                        </el-form-item> 
                        <el-button type='danger' @click='batchRemove' :disabled='this.sels.length===0'>批量删除</el-button> 
                    </el-form>
                </el-col>


  
         <!--列表-->
         <el-table :data='users' highlight-current-row v-loading='listLoading' @selection-change='selsChange'
                  style='width: 100%;'
                  sortable='custom' @sort-change='sortKey'>

            <el-table-column prop='TDC_ID' label='通道配置' width='' sortable>  </el-table-column> 
<el-table-column prop='TDC_TdId' label='通道编号' width='' sortable>  </el-table-column> 
<el-table-column prop='TDC_SwjId' label='上位机编号' width='' sortable>  </el-table-column> 
<el-table-column prop='TDC_State' label='状态' width='' sortable>  </el-table-column> 

             
            <el-table-column label = '操作' width = '150' > 
                <template scope = 'scope' > 
                    <el-button size = 'small' @click = 'handleEdit(scope.$index, scope.row)' > 编辑 </el-button>
                    <el-button type = 'danger' size = 'small' @click = 'handleDel(scope.$index, scope.row)' > 删除 </el-button>
                </template>
            </el-table-column>

         </el-table> 
 


        <!-- 工具条 ,分页 -->
        <el-col :span='24' class='toolbar'>

            <el-pagination layout='prev, pager, next' @current-change='handleCurrentChange' :page-size='50'
                           :total='total' style='float:right;'>
            </el-pagination>
        </el-col>


 
                <!--编辑界面-->
                <el-dialog title='编辑' :visible.sync='editFormVisible' v-model='editFormVisible' :close-on-click-modal='false'>
                    <el-form :model='editForm' label-width='80px' :rules='editFormRules' ref='editForm'>
                         
                     <el-form-item label='通道配置' prop='TDC_ID'>
                          <el-input v-model='editForm.TDC_ID' auto-complete='off'></el-input>
                     </el-form-item>
                

                     <el-form-item label='通道编号' prop='TDC_TdId'>
                          <el-input v-model='editForm.TDC_TdId' auto-complete='off'></el-input>
                     </el-form-item>
                

                     <el-form-item label='上位机编号' prop='TDC_SwjId'>
                          <el-input v-model='editForm.TDC_SwjId' auto-complete='off'></el-input>
                     </el-form-item>
                

                     <el-form-item label='状态' prop='TDC_State'>
                          <el-input v-model='editForm.TDC_State' auto-complete='off'></el-input>
                     </el-form-item>
                

                    </el-form>
                    <div slot='footer' class='dialog-footer'>
                        <el-button @click.native='editFormVisible = false'>取消</el-button>
                        <el-button type='primary' @click.native='editSubmit' :loading='editLoading'>提交</el-button>
                    </div>
                </el-dialog> 



        <!--新增界面-->
        <el-dialog title='新增' :visible.sync='addFormVisible' v-model='addFormVisible' :close-on-click-modal='false'>
            <el-form :model='addForm' label-width='80px' :rules='addFormRules' ref='addForm'>

               
            
                    <el-form-item label='通道配置' prop='TDC_ID'>
                        <el-input v-model='addForm.TDC_ID' auto-complete='off'></el-input>
                    </el-form-item>
                

                    <el-form-item label='通道编号' prop='TDC_TdId'>
                        <el-input v-model='addForm.TDC_TdId' auto-complete='off'></el-input>
                    </el-form-item>
                

                    <el-form-item label='上位机编号' prop='TDC_SwjId'>
                        <el-input v-model='addForm.TDC_SwjId' auto-complete='off'></el-input>
                    </el-form-item>
                

                    <el-form-item label='状态' prop='TDC_State'>
                        <el-input v-model='addForm.TDC_State' auto-complete='off'></el-input>
                    </el-form-item>
                


            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click.native='addFormVisible = false'>取消</el-button>
                <el-button type='primary' @click.native='addSubmit' :loading='addLoading'>提交</el-button>
            </div>
        </el-dialog>



 

    </section>
</template>

<script>

                import util from '../../../util/date'
                import { testapi, getPage_DTSN_TongDaoConfig, getByID_DTSN_TongDaoConfig ,edit_DTSN_TongDaoConfig, add_DTSN_TongDaoConfig, batchRemove_DTSN_TongDaoConfig, Remove_DTSN_TongDaoConfig  } from '../../api/api';

                export default { 
                     data() {   // 全局变量
                            return {
                                filters: { name: '' },
                                users: [],
                                total: 0,
                                page: 1,
                                listLoading: false,
                                sels: [],//列表选中列
                                addDialogFormVisible: false,
                                editFormVisible: false,//编辑界面是否显示
                                editLoading: false,
                                editFormRules: {      TDC_ID: [{ required: true, message: '请输入通道配置', trigger: 'blur' }] ,     
      TDC_TdId: [{ required: true, message: '请输入通道编号', trigger: 'blur' }] ,     
      TDC_SwjId: [{ required: true, message: '请输入上位机编号', trigger: 'blur' }] ,     
      TDC_State: [{ required: true, message: '请输入状态', trigger: 'blur' }] ,     
}
 ,
                                //编辑界面数据
                                editForm: {      TDC_ID:0,    
      TDC_TdId:0,    
      TDC_SwjId:0,    
      TDC_State:0,    
}
, 
                                addFormVisible: false,//新增界面是否显示
                                addLoading: false,
                                addFormRules:  {      TDC_ID: [{ required: true, message: '请输入通道配置', trigger: 'blur' }] ,     
      TDC_TdId: [{ required: true, message: '请输入通道编号', trigger: 'blur' }] ,     
      TDC_SwjId: [{ required: true, message: '请输入上位机编号', trigger: 'blur' }] ,     
      TDC_State: [{ required: true, message: '请输入状态', trigger: 'blur' }] ,     
}
,
                                //新增界面数据
                                addForm: {      TDC_TdId:0,    
      TDC_SwjId:0,    
      TDC_State:0,    
}
 
                                     }
                              },
                    methods: {    // 全局方法
                        //性别显示转换
                        //formatSex: function (row, column) {
                        //    return row.C_Value == 2 ? '男' : row.C_Value;
                        //},
                        //formatterCreateTime: function (row, column) {
                        //    return (!row.C_CreateTime || row.C_CreateTime == '') ? '' : util.formatDate.format(new Date(row.C_CreateTime), 'yyyy-MM-dd');
                        //},
                        handleCurrentChange(val) {
                            this.page = val;
                            this.getDtoPage();
                        }, 
                        // 测试
                        sortKey(val) {
                            console.log(val)
                        },


                        //获取用户列表
                        getDtoPage() { 
                            let para = {
                                page: this.page,
                                key: this.filters.name
                            };
                            this.listLoading = true;

                            testapi();

                            getPage_DTSN_TongDaoConfig(para).then((res) => {
                                console.log(res);
                                this.total = res.data.response.dataCount;
                                this.users = res.data.response.data;
                                this.listLoading = false;

                            });
                        },
                        //删除
                        handleDel: function (index, row) {
                            this.$confirm('确认删除该记录吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.listLoading = true;
                                let para = { id: row.TDC_ID };
                                 Remove_DTSN_TongDaoConfig(para).then((res) => {
                                    if (util.isEmt.format(res)) {
                                        this.listLoading = false;
                                        return;
                                    }
                                    this.listLoading = false;
                                    if (res.data.success) {
                                        this.$message({
                                            message: '删除成功',
                                            type: 'success'
                                        });
                                    } else {
                                        this.$message({
                                            message: res.data.msg,
                                            type: 'error'
                                        });
                                    }
                                    this.getDtoPage();
                                });
                            }).catch((c) => {
                                console.log(c);
                            });
                        },
                        //显示编辑界面
                        handleEdit: function (index, row) {
                            this.editFormVisible = true;

                            let para_getGetByID = { id: row.TDC_ID };

                           getByID_DTSN_TongDaoConfig(para_getGetByID).then((getDto) => {

                                this.editForm = Object.assign({}, getDto.data.response);
                            });
                        },
                        //显示新增界面
                        handleAdd() {
                            this.addFormVisible = true;
                            this.addForm = {      TDC_TdId:0,    
      TDC_SwjId:0,    
      TDC_State:0,    
}
;
                        },
                        //编辑
                        editSubmit: function () {
                            this.$refs.editForm.validate((valid) => {
                                if (valid) {
                                    this.$confirm('确认提交吗？', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                    }).then(() => {
                                        this.editLoading = true;
                                        //NProgress.start();
                                        let para = Object.assign({}, this.editForm);
                                        console.log(para);
                                        edit_DTSN_TongDaoConfig(para).then((res) => {

                                            if (util.isEmt.format(res)) {
                                                this.editLoading = false;
                                                return;
                                            }
                                            if (res.data.success) {
                                                this.editLoading = false;
                                               
                                                this.$message({
                                                    message: res.data.msg,
                                                    type: 'success'
                                                });
                                                this.$refs['editForm'].resetFields();
                                                this.editFormVisible = false;
                                                this.getDtoPage();
                                            } else {
                                                this.$message({
                                                    message: res.data.msg,
                                                    type: 'error'
                                                });
                                            }
                                        });
                                    });
                                }
                            });
                        },
                        //新增
                        addSubmit: function () {
                            this.$refs.addForm.validate((valid) => {
                                if (valid) {
                                    this.$confirm('确认提交吗？', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                    }).then(() => {
                                        this.addLoading = true;
                                        let para = Object.assign({}, this.addForm);

                                        add_DTSN_TongDaoConfig(para).then((res) => {

                                            if (util.isEmt.format(res)) {
                                                this.addLoading = false;
                                                return;
                                            }

                                            if (res.data.success) {
                                                this.addLoading = false;
                                                this.$message({
                                                    message: res.data.msg,
                                                    type: 'success'
                                                });
                                                this.$refs['addForm'].resetFields();
                                                this.addFormVisible = false;
                                                this.getDtoPage();
                                            }
                                            else {
                                                this.$message({
                                                    message: res.data.msg,
                                                    type: 'error'
                                                });
                                            }
                                        });
                                    });
                                }
                            });
                        },
                        selsChange: function (sels) {
                            this.sels = sels;
                        },
                        //批量删除
                        batchRemove: function () {

                            var ids = this.sels.map(item => item.TDC_ID).toString();
                            this.$confirm('确认删除选中记录吗？', '提示', {
                                type: 'warning',
                                confirmButtonText: '确定',
                                cancelButtonText: '取消'
                            }).then(() => {
                                this.listLoading = true; 
                                let para = { ids: ids };

                                batchRemove_DTSN_TongDaoConfig(para).then((res) => {
                                    this.listLoading = false;
 
                                    if (res.data.success) {
                                        this.$message({
                                            message: '删除成功',
                                            type: 'success'
                                        });
                                    } else {
                                        this.$message({
                                            message: res.data.msg,
                                            type: 'error'
                                        });
                                    }
                                    this.getDtoPage();
                                    console.log(res)
                                });
                            }).catch(() => {

                            });
                        }
                    },
                    mounted() {
                        this.getDtoPage();
        }
                      } 

</script>

<style scoped>
</style>
